<template>
  <div>
    <template v-if="!formInlineShow">
      <div class="titleItem">
        <span>{{ $t('maintenance.Maintenancecontent') }}</span>
        <div class="checkObject" style="padding: 0 0">
          <div class="checkObjectItem">
            <div class="checkObjectName" :class="{ required: true }">{{ $t('maintenance.MaintenanceLevel') }}
            </div>
            <div class="checkObjectValue">
              {{ formInline.itemLevel }}
            </div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName" :class="{ required: true }">{{ $t('maintenance.MaintenanceItem') }}
            </div>
            <div class="checkObjectValue">
              {{ formInline.itemProject }}
            </div>
          </div>
        </div>
        <div class="checkObject" style="padding: 0 0">
          <div class="checkObjectItem">
            <div class="checkObjectName" :class="{ required: true }">
              {{ $t('maintenance.MaintenanceMethod') }}
            </div>
            <div class="checkObjectValue">
              {{ formInline.itemMethod }}
            </div>
          </div>

          <div class="checkObjectItem">
            <div class="checkObjectName" :class="{ required: true }">{{ $t('保养位置') }}
            </div>
            <div class="checkObjectValue">
              {{ formInline.bomOrg }}
            </div>
          </div>
        </div>
      </div>
      <div class="titleItem">
        <span>{{ $t('maintenance.Maintenancestandards') }}</span>
        <div class="checkObject">
          <div class="checkObjectItem">
            <div class="checkObjectName">{{ $t('maintenance.numberRequirements') }}</div>
            <div class="checkObjectValue">
              {{ formInline.minValue }}
            </div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName" :class="{ required: true }">{{ $t('maintenance.workinghours') }}</div>
            <div class="checkObjectValue">
              {{ formInline.itemHours }}
            </div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName">{{ $t('maintenance.Maintenancestandards') }}</div>
            <div class="checkObjectValue">
              {{ formInline.unitName }}
            </div>
          </div>
        </div>
      </div>
    </template>
    <div class="titleItem tab">
      <span>{{ $t('maintenance.usetools') }}</span>
    </div>
    <div class="tableContent">
      <Table ellipsis ref="selection" :columns="toolColumns" :data="planToolList">
      </Table>
    </div>

    <div class="titleItem tab">
      <span>{{ $t('maintenance.Usematerial') }}</span>
    </div>
    <div class="tableContent">
      <Table ellipsis ref="selection" :columns="materColumns" :data="materData">
      </Table>
    </div>
  </div>
</template>

<script>
export default {
  name: "contentDetail",
  props: ['formInline', 'planToolList', 'materData', 'formInlineShow'],
  data() {
    return {
      materColumns: [
        {
          type: 'index',
          width: 90,
          title: `${this.$t('common.index')}`,
          align: 'center'
        },
        {
          title: `${this.$t('maintenance.MaterialnoInfo')}`,
          key: 'materielNo',
          align: 'center'
        },
        {
          title: `${this.$t('common.GoodsName')}`,
          key: 'goodsName',
          align: 'center'
        },
        {
          title: `${this.$t('spareParts.Specification')}`,
          key: 'specification',
          align: 'center'
        },
        {
          title: `${this.$t('spareParts.quantity')}`,
          key: 'num',
          width: 170,
          align: 'center'
        },
      ],
      levels: [
        { value: 1, label: '一级保养' },
        { value: 2, label: '二级保养' },
        { value: 3, label: '三级保养' }
      ],
      toolColumns: [
        {
          type: 'index',
          width: 80,
          title: `${this.$t('common.index')}`,
          align: 'center'
        },
        {
          title: `${this.$t('maintenance.ToolMaterialNo')}`,
          key: "toolCode",
          align: 'center',
          minWidth: 100,
          tooltip: true
        },
        {
          title: `${this.$t('maintenance.Toolnames')}`,
          key: "toolName",
          align: 'center',
          minWidth: 100,
          tooltip: true
        },
        {
          title: `${this.$t('保管方式')}`,
          key: "toolMode",
          align: 'center',
          minWidth: 100,
          tooltip: true
        },
        { title: `${this.$t('spareParts.quantity')}`, key: "toolNum", align: 'center', minWidth: 100, tooltip: true },
      ],
      materialColumns: [
        {
          title: `${this.$t('maintenance.materialcode')}`,
          key: "materialCode",
          align: 'center',
          minWidth: 100,
          tooltip: true
        },
        {
          title: `${this.$t('maintenance.materialname')}`,
          key: "materialName",
          align: 'center',
          minWidth: 100,
          tooltip: true
        },
        {
          title: `${this.$t('spareParts.quantity')}`,
          key: "num", align: 'center', minWidth: 100, tooltip: true
        },
        {
          title: `${this.$t('maintenance.Unitprice')}`,
          key: "unitPrice",
          align: 'center',
          minWidth: 100,
          tooltip: true
        },
        {
          title: `${this.$t('maintenance.totalprice')}`,
          key: "totalPrice",
          align: 'center',
          minWidth: 100,
          tooltip: true
        },
      ],
    };
  },
};
</script>

<style lang="scss">
.titleItem {
  position: relative;
  font-size: 18px;
  //font-weight: bold;
  padding: 10px;

  .checkObject {
    display: flex;
    flex-wrap: wrap;
    // padding: 20px;

    .checkObjectItem {
      display: flex;
      flex: 33.33%;
      flex-wrap: wrap;

      .checkObjectName {
        color: #000000 !important;
        height: 40px;
        line-height: 40px;
        width: 100%;
        border: 1px solid #eeeeee;
        background: #f5f6f7;
        text-align: left;
        padding-left: 10px;
      }

      .checkObjectValue {
        height: 40px;
        line-height: 40px;
        width: 100%;
        border: 1px solid #eeeeee;
        padding-left: 10px;
      }
    }
  }

  .checkTool {
    display: flex;
    padding: 20px;

    .checkToolItem {
      flex: 1;

      .checkObjectName {
        height: 40px;
        line-height: 40px;
        width: 100%;
        border: 1px solid #eeeeee;
        background: #f5f6f7;
        text-align: center;
      }

      .checkObjectValue {
        height: 40px;
        line-height: 40px;
        width: 100%;
        border: 1px solid #eeeeee;
        text-align: center;
      }
    }
  }

  .searchBox {
    .label {
      display: flex;
    }
  }

}

.contentTable {
  margin: 20px;
}

.titleItem::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 20px;
  top: 12px;
  left: 0px;
  background: #187bdb;
}
</style>
